<template>
  <div class="tree-wrap">
    <VirtualTree :items="list" childrenKey="userInfoList"></VirtualTree>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import VirtualTree from './packages/virtual-tree'

export default defineComponent({
  name: 'App',
  components: {
    VirtualTree
  },
  setup() {
    // eslint-disable-next-line
    const bigData = require('./mock/treeData.json')
    let list = reactive([])
    list = bigData
    return {
      list
    }
  }
})
</script>

<style lang="stylus">
html, body
  margin 0
  padding 0
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  color #2c3e50
  margin-top 60px
.tree-wrap
  width 400px
  height 500px
  margin 30px auto
</style>
